<template>
  <div class="computed">
    姓：<input type="text" v-model="firstName" /><br />
    名：<input type="text" v-model="lastName" /><br />
    <!-- 全名：<span>{{ firstName }}-{{ lastName }}</span> -->
    全名：<span>{{ fullName }}</span>
    <button @click="updateFullName">修改全名</button>
  </div>
</template>

<!-- vue2 里的computed -->
<!-- <script>
  export default { 
    computed:{

    }
  };
</script> -->

<script setup lang="ts" name="computedPage_ZLX">
  import { ref, computed } from 'vue';
  let firstName = ref('张');
  let lastName = ref('三');

  // 返回全名（且姓的首字母大写）
  // computed 只有发生变化了才执行，这么定义的 fullName 是一个计算属性，且是可读的。它是根据 firstName 和 lastName 的变化引起的
  // let fullName = computed(() => {
  //   return firstName.value.slice(0, 1).toLocaleUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
  // });

  // computed 可读可写方法
  let fullName = computed({
    get() {
      return firstName.value.slice(0, 1).toLocaleUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
    },
    set(val) {
      // 这里的 val 是 fullName.value 即 li-si
      // 要修改 姓 和 名 需要将 fullName 的值赋值给它们
      const fullNameSplitArray = val.split('-');
      firstName.value = fullNameSplitArray[0];
      lastName.value = fullNameSplitArray[1];
      console.log('set', val);
    }
  });

  function updateFullName() {
    // 无法为“value”赋值，因为它是只读属性。
    fullName.value = 'li-si';
  }
</script>

<style scoped></style>
